<template>
    <div class="runOrderDetails" :style="{minHeight:$store.state.minHeight+'rem'}">
      <myHead :title="this.$route.query.title+'详情'"></myHead>
      <div class="title">
          <p>订单状态</p>
          <p>{{this.$route.query.title}}</p>
      </div>
      <div class="order-item-info">
        <div class="order-item-info-top">
          <p><img src="../../../static/img/od002.png" alt=""></p>
          <div class="userInfo">
            <p>西安市-雁塔区曲江池东路28号楼1403室</p>
            <p>张晓明  1891049125</p>
          </div>
        </div>
        <p class="order-item-info-top-hx"></p>
        <div class="order-item-info-top">
          <p><img src="../../../static/img/od004.png" alt=""></p>
          <div class="userInfo">
            <p>西安市-雁塔区曲江池东路28号楼1403室</p>
            <p>李大宝  1891049125</p>
          </div>
        </div>
      </div>
      <div class="msgInfo">
        <div class="msgInfo-item">
            <p>取货时间</p>
            <p>立即取货</p>
        </div>
        <div class="msgInfo-item">
            <p>物品类型</p>
            <p>文件</p>
        </div>
        <div class="msgInfo-item" v-show="this.$route.query.title=='待支付'">
            <p>剩余支付时间</p>
            <p>29：34</p>
        </div>
      </div>
      <footer v-show="this.$route.query.title=='待支付'">
          <div class="foot-l">￥10</div>
          <div class="foot-r">
              <p @click="isShow=true">取消订单</p>
              <p>马上支付</p>
          </div>
      </footer>
      <!--  询问弹窗  -->
      <van-dialog v-model="isShow" title="确定取消订单吗？" show-cancel-button width="3.2rem" @confirm="confirm"></van-dialog>
    </div>
</template>

<script>
  import myHead from "../../components/ClientComponents/lib/myHead";

  export default {
    name: "runOrderDetails",
    components:{
      myHead
    },
    data(){
      return {
        isShow:false
      }
    },
    methods:{
      confirm(){
        console.log(111)
        this.$myNotice('订单已取消',2000);
      }
    }
  }
</script>

<style scoped>
  .runOrderDetails {
    box-sizing: border-box;
    padding-top: .5rem;
    background-color: #F5F5F5;
  }
  .title {
    padding-left: .15rem;
    height: .5rem;
    background-color: #FFFFFF;
    display: flex;
    flex-flow: row;
    align-items: center;
    margin-bottom: .1rem;
  }
  .title>p:nth-child(1) {
    font-size:.14rem;
    font-family:PingFang SC;
    font-weight:500;
    color: #333333;
    margin-right: .2rem;
  }
  .title>p:nth-child(2) {
    color: #FF7611;
    font-size:.14rem;
    font-family:PingFang SC;
    font-weight:500;
  }

  .order-item-info {
    background-color: #FFFFFF;
    padding: .05rem .15rem;
    margin-bottom: .1rem;
  }
  .order-item-info-top {
    display: flex;
    flex-flow: row;
    align-items: center;
    justify-content: space-between;
    margin-bottom: .1rem;
  }
  .order-item-info-top>p:nth-child(1) {
    width: .35rem;
    text-align: left;
  }
  .order-item-info-top-hx{
    width: 100%;
    height: .01rem;
    background-color: #F5F5F5;
  }
  .order-item-info-top>p:nth-child(1)>img {
    width: .19rem;
    max-height: .22rem;
  }
  .userInfo {
    width: calc(100% - .35rem);
    height: .5rem;
    display: flex;
    flex-flow: column;
    justify-content: space-around;
  }
  .userInfo>p:nth-child(1) {
    font-size:.14rem;
    font-family:PingFang SC;
    font-weight:500;
    color: #333333;
  }
  .userInfo>p:nth-child(2) {
    font-size:.13rem;
    font-family:PingFang SC;
    font-weight:500;
    color: #B5B5B5;
  }

  .msgInfo {
    background-color: #FFFFFF;
    padding: 0 .15rem;
  }
  .msgInfo-item {
    height: .5rem;
    display: flex;
    flex-flow: row;
    align-items: center;
    box-sizing: border-box;
    border-bottom: .01rem solid #F5F5F5;
  }
  .msgInfo-item:nth-last-child(1) {
    border: none;
  }
  .msgInfo-item>p:nth-child(1) {
    width: 1rem;
    font-size:.14rem;
    font-family:PingFang SC;
    font-weight:500;
    color: #333333;
    margin-right: .1rem;
  }
  .msgInfo-item>p:nth-child(2) {
    font-size:.14rem;
    font-family:PingFang SC;
    font-weight:500;
    color: #999999;
  }

  footer {
    width: 100%;
    height: .55rem;
    position: fixed;
    bottom: 0;
    left: 0;
    box-sizing: border-box;
    padding: 0 .25rem 0 .15rem;
    display: flex;
    flex-flow: row;
    align-items: center;
    justify-content: space-between;
    background-color: #FFFFFF;
  }
  .foot-l {
    font-size:.24rem;
    font-family:PingFang SC;
    font-weight:500;
    color: #FF7611;
  }
  .foot-r {
    display: flex;
    flex-flow: row;
    align-items: center;
  }
  .foot-r>p {
    width:1rem;
    height:.34rem;
    box-sizing: border-box;
    border-radius:.17rem;
    text-align: center;
    line-height: .34rem;
  }
  .foot-r>p:nth-child(1) {
    border: .01rem solid #FF7611;
    color: #FF7611;
  }
  .foot-r>p:nth-child(2) {
    border: .01rem solid #FF7611;
    background-color: #FF7611;
    color: #FFFFFF;
    margin-left: .1rem;
  }
</style>
